<template>
	<view class="Cascade-echarts">
		<view class="Cascade-echarts-title">
			<uni-section class="mb-10" title="可视化图表查询结果:" titleFontSize="10px">
				<template v-slot:decoration>
				  <view class="decoration"></view>
				</template>
			</uni-section>
			
		<!-- Description -->
		<view class="Cascade-echarts-title-select">
			<picker mode="selector" :selectedId="selectedId" :range="menuItems" @change="selectOnChange">
				<view class="picker-item" >
					{{selectedItem}}
				</view>
			</picker>
		</view>
		
	</view>
	
	<!-- Description -->
	<uni-section title="Description:" type="line">
		<uni-group mode="card">
			<view style="display: flex;align-items: center;justify-content:flex-start;font-size: 10px;"> 
				<span style="flex:1;">{{'图表切换形状索引：' + currentIndex}}</span> 
			</view>
			<view style="display: flex;align-items: center;justify-content:flex-start;font-size: 10px;">
				<span style="flex:1;color: #cc0033;">{{ illustrate }}</span> 
			</view>
			<view style="display: flex;align-items: center;justify-content:flex-start;font-size: 10px;"> 
				<span style="flex:1;">{{'图表切换形状索引：' + selectedId}}</span> 
				<span style="flex:1;">{{'调用相对应接口：'}}</span>
			</view>			
		</uni-group>
	</uni-section>
	
	<!-- echarts-Content -->
	<!-- 饼状图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 0">
		<qiun-data-charts
		  type="pie"
		  :opts="optsPie"
		  :chartData="chartDataPie"
		/>
	</view>
	<!-- 柱状图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 1">
		<qiun-data-charts
		  type="column"
		  :opts="optsColumn"
		  :chartData="chartDataColumn"
		/>
	</view>
	<!-- 折线图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 2">
		<qiun-data-charts
		  type="line"
		  :opts="optsLine"
		  :chartData="chartDataLine"
		/>
	</view>
	<!-- 气泡图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 3">
	   <qiun-data-charts 
		  type="bubble"
		  :opts="optsbubble"
		  :chartData="chartDatabubble"
		/>
	</view>
	<!-- K线图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 4">
	   <qiun-data-charts
		 type="candle"
		 :opts="Kopts"
		 :chartData="KchartData"
		 :disableScroll="true"
		 :ontouch="true"
		 :onzoom="true"
	   />
	</view>
	<!-- 混合图 -->
	<view class="Cascade-echarts-content" v-if="selectedId === 5">
	  <qiun-data-charts 
		type="mix"
		:opts="Mopts"
		:chartData="MchartData"
	  />
	</view>
	
	<!-- 模态提示框 -->
	<ShowModel :isVisible.sync="showModal"></ShowModel>
	
</view>
		
</template>

<script>
	// 自定义子组件
	import DateTime from '@/compopents/DateTime.vue'
	import ShowModel from '@/compopents/ShowModel/ShowModel.vue'
	// 接口文件
	import {
		getNumberVisits
	} from '@/api/api.js'
	export default {
		components: {
			DateTime,
			ShowModel
		},
		props: {
			// CurrentItems: {
			// 	type: Object,
			// 	required: true
			// }
			CurrentItems: ""
		},
		data() {
			return {
				interfaceData:[],
				showModal: false,
				selectedId:0,
				menuItems:['饼图','柱状图','折线图','气泡图','K线图','混合图'],
				selectedItem: '点击切换图表展示类型',
				switchChart:'切换图表类型',
				current: 0,
				currentIndex:0,
				illustrate:'0为饼图，1为柱状图，2为折线图，3为气泡图，4为K线图，5为混合图',
				items: ['科室排名', '医生排名'],
				styleType: 'button',
				scrollTop: 0,
				old: {
				scrollTop: 0
				},
				activeColor: '#007aff',
				tabs: ['可视化图表分析', '可视化表格分析'],
				activeIndex: 0, // 当前激活的选项卡索引
				subTitle:'查询结果显示',
				dataTree:[],
				value: 0,
				chooseRs:'',
				onpopupclosede:'',
				classes: '',
				// Ucharts
		opts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,15,0,15],
				        enableScroll: false,
				        legend: {},
				        xAxis: {
				          disableGrid: false,
				          gridType: "dash",
				          splitNumber: 5,
				          boundaryGap: "justify",
				          min: 0,
				          max: 250
				        },
				        yAxis: {
				          disableGrid: false,
				          gridType: "dash",
				          data: [
				            {
				              min: 0,
				              max: 150
				            }
				          ]
				        },
				        extra: {
				          bubble: {
				            border: 2,
				            opacity: 0.5
				          }
				        }
				      },
		chartDataPie: {},
				      optsPie: {
				        rotate: false,
				        rotateLock: false,
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [5,5,5,5],
				        dataLabel: true,
				        enableScroll: false,
				        legend: {
				          show: true,
				          position: "bottom",
				          lineHeight: 20
				        },
				        title: {
				          name: "收益率",
				          fontSize: 15,
				          color: "#666666"
				        },
				        subtitle: {
				          name: "70%",
				          fontSize: 8,
				          color: "#7cb5ec"
				        },
				        extra: {
				          pie: {
				            ringWidth: 60,
				            activeOpacity: 0.5,
				            activeRadius: 5,
				            offsetAngle: 0,
				            labelWidth: 5,
				            border: true,
				            borderWidth: 3,
				            borderColor: "#FFFFFF"
				          }
				        }
				      },
				chartDataColumn: {},
				  //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		optsColumn: {
					        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					        padding: [15,15,0,5],
					        enableScroll: false,
					        legend: {},
					        xAxis: {
					          disableGrid: true
					        },
					        yAxis: {
					          data: [
					            {
					              min: 0
					            }
					          ]
					        },
					        extra: {
					          column: {
					            type: "group",
					            width: 10,
					            activeBgColor: "#000000",
					            activeBgOpacity: 0.08
					          }
					        }
					      },
 			  chartDatabubble: {},
	    optsbubble: {
	    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					   padding: [15,15,0,15],
					   enableScroll: false,
					   legend: {},
					   xAxis: {
						 disableGrid: false,
						 gridType: "dash",
						 splitNumber: 5,
						 boundaryGap: "justify",
						 min: 0,
						 max: 250
					   },
					   yAxis: {
						 disableGrid: false,
						 gridType: "dash",
						 data: [
						   {
							 min: 0,
							 max: 150
						   }
						 ]
					   },
					   extra: {
						 bubble: {
						   border: 2,
						   opacity: 0.5
						 }
					   }
					},
		KchartData: {},
				  //您可以通过修改 config-ucharts.js 文件中下标为 ['candle'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				  Kopts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,15],
					dataLabel: false,
					enableScroll: true,
					enableMarkLine: true,
					legend: {},
					xAxis: {
					  labelCount: 4,
					  itemCount: 40,
					  disableGrid: true,
					  gridColor: "#CCCCCC",
					  gridType: "solid",
					  dashLength: 4,
					  scrollShow: true,
					  scrollAlign: "left",
					  scrollColor: "#A6A6A6",
					  scrollBackgroundColor: "#EFEBEF"
					},
					yAxis: {},
					extra: {
					  candle: {
						color: {
						  upLine: "#f04864",
						  upFill: "#f04864",
						  downLine: "#2fc25b",
						  downFill: "#2fc25b"
						},
						average: {
						  show: true,
						  name: [
							"MA5",
							"MA10",
							"MA30"
						  ],
						  day: [
							5,
							10,
							20
						  ],
						  color: [
							"#1890ff",
							"#2fc25b",
							"#facc14"
						  ]
						}
					  },
					  markLine: {
						type: "dash",
						dashLength: 5,
						data: [
						  {
							value: 2150,
							lineColor: "#f04864",
							showLabel: true
						  },
						  {
							value: 2350,
							lineColor: "#f04864",
							showLabel: true
						  }
						]
					  },
					  tooltip: {
						showCategory: true
					  }
					}
				  },
		MchartData: {},
				      //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				      Mopts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,15,0,15],
				        enableScroll: false,
				        legend: {},
				        xAxis: {
				          disableGrid: true,
				          title: "单位：年"
				        },
				        yAxis: {
				          disabled: false,
				          disableGrid: false,
				          splitNumber: 5,
				          gridType: "dash",
				          dashLength: 4,
				          gridColor: "#CCCCCC",
				          padding: 10,
				          showTitle: true,
				          data: [
				            {
				              position: "left",
				              title: "折线"
				            },
				            {
				              position: "right",
				              min: 0,
				              max: 200,
				              title: "柱状图",
				              textAlign: "left"
				            },
				            {
				              position: "right",
				              min: 0,
				              max: 200,
				              title: "点",
				              textAlign: "left"
				            }
				          ]
				        },
				        extra: {
				          mix: {
				            column: {
				              width: 20
				            }
				          }
				        },
					 }
			};
		},
		onReady() {
			 // this.getServerData();			
		},
		mounted() {
			this.getServerData();
		},
		methods:{
			/*
				huoqudata
			*/

			loadData() {
				// 把当前时间参数放入接口所需数组参数中
				let Datedata = uni.getStorageSync("chooseDate");
				this.startTime = Datedata[0]
				this.endTime = Datedata[1]
				// console.log(this.startTime,this.endTime);
				let data = {
					startTime: this.startTime,
					endTime: this.endTime,
				}
				// 判断选项卡index条件 0时调用科室排名接口
				if (this.CurrentItems.currentIndex === 0) {
					getNumberVisits(data).then(res => {
						// console.log('>>>>>>>>' + res.data);
						if (res.data == null) {
							this.openModal()
						} else {
							uni.setStorageSync('getNumberVisits', res.data)
							this.interfaceData = res.data
							console.log(this.interfaceData[0]);
						}
					})
				} 
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
		
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			 getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// 饼图PiechartData
					let resPie = {
					    series: [
					    {
					       data: [
							   {"name":"内容1","value":50},
							   {"name":"内容2","value":30},
							   {"name":"内容3","value":20},
							   {"name":"内容4","value":18,"labelText":"内容4:18res"},
							   {"name":"内容5","value":8},
							   ] 
					    }
					    ]
					  };
					//柱状图ColumnchartData
			        let resColumn = {
						categories: ["1","2","3","4","5","6"],
						series: [
						  {
							name: "支出",
							data: [35,36,31,33,13,34]
						  },
						  { 
							name: "收入",
							data: [18,27,21,24,6,28]
						  }
						]
					  };
					//折线图LinechartData
					let resLine = {
						categories: ["2018","2019","2020","2021","2022","2023"],
							series: [
							  {
								name: "成交量A",
								data: [35,8,25,37,4,20]
							  },
							  {
								name: "成交量B",
								data: [70,40,65,100,44,68]
							  },
							  {
								name: "成交量C",
								data: [100,80,95,150,112,132]
							  }
							]
					  };
					  // 气泡图bubblechartData
					  let resbubble = {
					  	series: [
					  	  {
					  		name: "气泡一",
					  		data: [[95,95,23,"标题1"]]
					  	  },
					  	  {
					  		name: "气泡二",
					  		data: [[130,30,30,"标题2"]]
					  	  }
					  	]
					    };	
				 let Kres = {
				            categories: ["2022/1/24","2022/1/25","2022/1/28","2022/1/29","2022/1/30","2022/1/31","2022/2/1","2022/2/4","2022/2/5","2022/2/6","2022/2/7","2022/2/8","2022/2/18","2022/2/19","2022/2/20","2022/2/21","2022/2/22","2022/2/25","2022/2/26","2022/2/27","2022/2/28","2022/3/1","2022/3/4","2022/3/5","2022/3/6","2022/3/7","2022/3/8","2022/3/11","2022/3/12","2022/3/13","2022/3/14","2022/3/15","2022/3/18","2022/3/19","2022/3/20","2022/3/21","2022/3/22","2022/3/25","2022/3/26","2022/3/27","2022/3/28","2022/3/29","2022/4/1","2022/4/2","2022/4/3","2022/4/8","2022/4/9","2022/4/10","2022/4/11","2022/4/12","2022/4/15","2022/4/16","2022/4/17","2022/4/18","2022/4/19","2022/4/22","2022/4/23","2022/4/24","2022/4/25","2022/4/26","2022/5/2","2022/5/3","2022/5/6","2022/5/7","2022/5/8","2022/5/9","2022/5/10","2022/5/13","2022/5/14","2022/5/15","2022/5/16","2022/5/17","2022/5/20","2022/5/21","2022/5/22","2022/5/23","2022/5/24","2022/5/27","2022/5/28","2022/5/29","2022/5/30","2022/5/31","2022/6/3","2022/6/4","2022/6/5","2022/6/6","2022/6/7","2022/6/13"],
				            series: [
				              {
				                name: "上证指数",
				                data: [[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]
				              }
				            ],
							};
				        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				        let Mres = {
				            categories: ["2018","2019","2020","2021","2022","2023"],
				            series: [
				              {
				                name: "曲面",
				                type: "area",
				                style: "curve",
				                data: [70,50,85,130,64,88]
				              },
				              {
				                name: "柱1",
				                index: 1,
				                type: "column",
				                data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
				              },
				              {
				                name: "柱2",
				                index: 1,
				                type: "column",
				                data: [50,20,75,60,34,38]
				              },
				              {
				                name: "曲线",
				                type: "line",
				                style: "curve",
				                color: "#1890ff",
				                disableLegend: true,
				                data: [70,50,85,130,64,88]
				              },
				              {
				                name: "折线",
				                type: "line",
				                color: "#2fc25b",
				                data: [120,140,105,170,95,160]
				              },
				              {
				                name: "点",
				                index: 2,
				                type: "point",
				                color: "#f04864",
				                data: [100,80,125,150,112,132]
				              }
				            ]
				          };
					this.chartDataPie = JSON.parse(JSON.stringify(resPie));
					this.chartDataColumn = JSON.parse(JSON.stringify(resColumn));
					this.chartDataLine = JSON.parse(JSON.stringify(resLine));
					this.chartDatabubble = JSON.parse(JSON.stringify(resbubble));
					this.KchartData = JSON.parse(JSON.stringify(Kres));
					this.MchartData = JSON.parse(JSON.stringify(Mres));
				  }, 500);
			    },
				
			// 自定义组件Modal open
			openModal() {
				this.showModal = true;
			},
			change(e) {
			// console.log("e:", e);
			},
			onnodeclick(e) {
				this.chooseRs = e
				this.subTitle = this.chooseRs.value
				// console.log(this.chooseRs.value);
			},
			onpopupopened(e) {
				// console.log('popupopened');
			},
			onpopupclosed(e) {
				// this.onpopupclosede = e
				// console.log('popupclosed>>>>>>>>'+ e);
			},
			selectOnChange(e) {
				// console.log(e);
			    this.selectedItem = this.menuItems[e.detail.value];
				this.selectedId = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	/*
	使用!default可以为属性设置一个默认值，
	以便在没有其他值被定义时起作用。
	这在定制化样式或覆盖默认样式时非常有用。
	*/
	$self-success: #18bc37 !default;
	$self-warn: #cc0033 !default;
	$self-fail: #36495d !default;
	$self-normal: #00a0e9 !default;

		.Cascade-echarts{
			background-color: #fff;
			.Cascade-echarts-title{
				display: flex;
				flex-direction: row;
				align-items: center;
				.Cascade-echarts-title-select{
					display: flex;
					font-size: 12px;
					font-weight: 600;
					color: $self-warn;
				}
			}
			.Cascade-echarts-content{
			  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			    width: 100%;
			    height: 600rpx;
			}
			.decoration{
				width: 6px;
				height: 6px;
				margin-right: 4px;
				border-radius: 50%;
				background-color: $self-normal;
			}
		}

</style>
